<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="./css/bootstrap.min.css" />
  <link rel="stylesheet" href="./css/index.css" />
  <title>英雄百科</title>
</head>

<body>
  <div class="main">
    <img class="cover"
      src="https://img.crawler.qq.com/lolwebschool/0/JAutoCMS_LOLWeb_f6416138ae858f73e2ca40a11587e17f/0" />
    <div class="hero-container">
      <input type="text" class="search" placeholder="检索" />
      <ul class="list">
        <li>
          <img src="http://game.gtimg.cn/images/lol/act/img/champion/Annie.png" class="pic" alt="" />
          <p>安妮</p>
        </li>
      </ul>
    </div>
  </div>
  <div id="infoModal" class="modal" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">黑暗之女安妮</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="info">
            <img src="http://game.gtimg.cn/images/lol/act/img/champion/Annie.png" class="icon img-thumbnail"
              alt="..." />
            <div class="progress-box">
              <div class="progress">
                <div class="attack progress-bar bg-success" style="width: 25%">攻击:</div>
              </div>
              <div class="progress">
                <div class="defense progress-bar bg-info" role="progressbar" style="width: 50%">防御:</div>
              </div>
              <div class="progress">
                <div class="magic progress-bar bg-warning" role="progressbar" style="width: 75%">魔法:</div>
              </div>
              <div class="progress">
                <div class="difficulty progress-bar bg-danger" role="progressbar" style="width: 100%">难度:</div>
              </div>
            </div>
          </div>
          <p>
            拥有危险夺命的能力，却长着一幅小大人儿的可爱模样，这就是掌握深不可测占火魔法的女孩——安妮。安妮生活在诺克萨斯北边的山脚下，但即便是在这种地方，她也依然是魔法师中的异类。她与火焰的紧密关系与生俱来——最初那些火焰是伴随着喜怒无常的冲动情绪出现的，后来她学会了如何掌握这些“好玩的小把戏”。其中，安妮最喜欢的就是她召唤亲爱的泰迪熊提伯斯——那头狂野的守护火兽。如今安妮已经迷失在了永恒的天真里，她在黑暗森林中游荡，寻觅着能陪自己玩耍的人。
          </p>
        </div>
      </div>
    </div>
  </div>
</body>
<script src="./lib/axios.js"></script>
<script src="./lib/bootstrap.min.js"></script>
<script>
  /* 
    功能列表
    1. 渲染英雄列表数据
    2. 搜索英雄
    3. 渲染英雄详情数据
   */

  // 功能1：渲染英雄列表数据
  // 1.1 封装getHero函数来获取数据并渲染
  function getHero() {
    // 1.2 axios 发送请求获取列表数据
    const res = axios({
      url: 'https://hmajax.itheima.net/api/lol/search',
      method: 'get',
    }).then(res => {
      // 1.3 map + join 得到li字符串结构，并显示到list中展示
      document.querySelector('.list').innerHTML = res.data.data
        .map(v => {
          return `
            <li>
                <img data-id='${v.heroId}' src="${v.icon}" class="pic" alt="" />
                <p>${v.title}</p>
              </li>`
        })
        .join('')
    })
  }
  // 1.4 调用函数，发送请求获取数据进行渲染
  getHero()

  // 功能2：搜索英雄
  // 2.1 给搜索框注册keyup键盘弹起事件
  document.querySelector('.search').addEventListener('keyup', function (e) {
    // 2.2 当用户按键为回车，才执行后续搜索功能，否则阻止
    if (e.key !== 'Enter') return
    // 2.3 判断用户输入内容是否为空，为空则提示并阻止后续搜索功能
    if (this.value.trim() === '') {
      return alert('内容不能为空')
    }
    // 2.4 axios 发送请求获取数据
    axios({
      url: 'https://hmajax.itheima.net/api/lol/search',
      method: 'get',
      params: {
        // 2.5 通过params 来携带需要搜索的英雄
        q: this.value.trim(),
      },
    }).then(res => {
      // 2.6 当业务状态码不为400，表示搜索成功
      if (res.data.code !== 400) {
        // 2.7 将服务器响应的搜索结果使用map + join 生成li结构字符串，并显示到list中展示
        document.querySelector('.list').innerHTML = res.data.data
          .map(v => {
            return `
            <li class="item">
                <img data-id='${v.heroId}' src="${v.icon}" class="pic" alt="" />
                <p>${v.title}</p>
              </li>`
          })
          .join('')
      } else {
        // 2.8 当业务状态码为400，表示搜索失败，给用户提示
        alert(res.data.msg)
      }
    })
  })

  // 功能3：渲染英雄详情数据
  // 3.1 初始化模态框
  const modal = new bootstrap.Modal(document.querySelector('#infoModal'))
  // 3.2 由于列表是动态生成的，所以采取事件委托来将click事件委托给list父元素
  document.querySelector('.list').addEventListener('click', function (e) {
    // 3.3 判断点击的元素是否包含pic类名（表示是图片元素）
    if (e.target.classList.contains('pic')) {
      // 3.4 axios 发送请求获取指定英雄数据
      axios({
        url: 'https://hmajax.itheima.net/api/lol/info',
        method: 'get',
        params: {
          // 3.5 通过params 来携带英雄id
          id: e.target.dataset.id,
        },
      }).then(res => {
        // 3.6 获取到服务器响应的数据，并设置到模态框中的对应部分
        const hero = res.data.data.hero
        document.querySelector('.modal-title').innerHTML = hero.name + hero.title
        document.querySelector('.icon').src = hero.icon
        document.querySelector('.attack').style.width = (hero.attack / 10) * 100 + '%'
        document.querySelector('.defense').style.width = (hero.defense / 10) * 100 + '%'
        document.querySelector('.magic').style.width = (hero.magic / 10) * 100 + '%'
        document.querySelector('.difficulty').style.width = (hero.difficulty / 10) * 100 + '%'
        // 3.7 当设置好模态框之后，显示模态框
        modal.show()
      })
    }
  })
</script>

</html>